import AMapLoader from "@amap/amap-jsapi-loader";
import carImg from "@/assets/map-legend/car_default.png";
import carRedImg from "@/assets/map-legend/car-red.png";
import csImg from "@/assets/map-legend/cs_default.png";
import companyImg from "@/assets/map-legend/company_default.png";
import cugImg from "@/assets/map-legend/cug.png";
import logoImg from "@/assets/logo.png";
import router from "@/router";

/**
 * 地图的初始化
 * 输入：
 *  plugins
 * 输出：
 *  Promise<AMap>
 */
export function loadMap(plugins = []) {
    return AMapLoader.load({
        key: "25c075024c8e0361d6ab136a3788e6f3",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins,       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    });
}

/**
 * 设置了默认的配置
 * @param AMap
 * @param id
 * @param options
 * @returns {*}
 */
export function initMap(AMap, id, options = {
    viewMode: "3D",    //是否为3D地图模式
    zoom: 12,           //初始化地图级别
    center: [114.49387, 36.610377]
}) {
    return new AMap.Map(id, options);
}


// 根据类型获取到指定的点
export function getMarkerByData(AMap, data) {
    const startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(30, 30),
        // 图标的取图地址
        image: getImageByData(data),
        // 图标所用图片大小
        imageSize: new AMap.Size(30, 30),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
    });
    return new AMap.Marker({
        position: new AMap.LngLat(data.lngLat[0], data.lngLat[1]),
        // 将一张图片的地址设置为 icon
        icon: startIcon,
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(0, 0),
    });
}

export function getInfoWindowByData(AMap, data, onClose) {
    var title = data.name;
    // const content = [];
    // content.push(`<div>经度：${data.lngLat[0]},纬度：${data.lngLat[1]}</div>`);
    // // 适配不同的数据，展示不同的框
    // setContentByData(content,data)

    const content = document.createElement("div");
    content.innerHTML += `<div>经度：${data.lngLat[0]},纬度：${data.lngLat[1]}</div>`
    setContentByData(content, data)

    return new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title, content, onClose),
        offset: new AMap.Pixel(16, -45)
    })
}

function setContentByData(content, data) {
    switch (data.type) {
        case 0:
            createCompInfo(content, data)
            break;
        case 1:
            break;
        case 2:
            createCarInfo(content, data)
            break;
        case 3:
            break;
    }
}

function createCompInfo(content, data) {
    content.innerHTML += `<div>生产状态：${data.status}</div>`
    content.innerHTML += `<div>门禁状态：${data.access}</div>`
}

function createCarInfo(content, data) {
    content.innerHTML += `<div>速度：${data.speed}</div>`
    var btnDom = document.createElement("button")
    btnDom.innerText="轨迹回放"
    btnDom.onclick = function () {
        // 轨迹回放按钮的操作，路由的跳转
        router.push(`/about?id=${data.id}`)
    };
    content.appendChild(btnDom)
}

export function getImageByData(data) {
    // 写图标的适配器
    switch (data.type) {
        case 0:
            return companyImg;
        case 1:
            return csImg;
        case 2:
            if (data.alarm === 0) {
                return carImg;
            } else {
                return carRedImg;
            }
        case 3:
            return cugImg
        default:
            return logoImg
    }
}

//构建自定义信息窗体
function createInfoWindow(title, content, onClose) {
    var info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";

    //可以通过下面的方式修改自定义窗体的宽高
    //info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement("div");
    var titleD = document.createElement("div");
    var closeX = document.createElement("img");
    top.className = "info-top";
    titleD.innerHTML = title;
    closeX.src = "https://webapi.amap.com/images/close2.gif";
    closeX.onclick = function () {
        onClose()
    };

    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);

    // 定义中部内容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = 'white';
    middle.appendChild(content);
    info.appendChild(middle);

    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    var sharp = document.createElement("img");
    sharp.src = "https://webapi.amap.com/images/sharp.png";
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
}

//关闭信息窗